<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="user-list">
        <li class="user">张三</li>
        <p>分隔符</p>
        <li class="user">李四</li>
        <li class="user">王五</li>
    </ul>
    <script>
        //获取容器的DOM元素
        const userList = document.querySelector('#user-list')
        //给父节点添加事件监听，当子节点触发的事件的事情，事件会向上冒泡到父元素上，触发父元素的处理函数
        userList.addEventListener('click',function(event){
           if(event.target.classList.contains('user')){
            alert(event.target.textContent);
           }
        });
        //以后我再动态的创建新的子元素，也不需要再重新绑定事件了
        let newUser = document.createElement('li');
        newUser.innerHTML = '赵六';
        userList.appendChild(newUser);
    </script>
</body>
</html>